<template>
  <div class="relation-line-style">
    <div class="style-modal">
      <div class="title">形状
        <ImgDropdown
          v-model="relationStyle.lineShape"
          :imgList="lineShapes"
          :col="2"
          @change="handleRelationStyleChange($event, 'lineShape')" />
      </div>
      <div class="content">
        <div class="block">
          <div class="b__item">
            <span>起点</span>
            <ImgDropdown
              v-model="relationStyle.startPointShape"
              :imgList="lineEndPointShapes"
              @change="handleRelationStyleChange($event, 'startPointShape')" />
          </div>
          <div class="b__item">
            <span>终点</span>
            <ImgDropdown
              v-model="relationStyle.endPointShape"
              :imgList="lineEndPointShapes"
              @change="handleRelationStyleChange($event, 'endPointShape')" />
          </div>
        </div>
        <div class="block">
          <div class="b__item flex w_auto margin_r_12">
            <p>颜色</p>
            <el-color-picker
              :teleported="false"
              v-model="relationStyle.lineColor"
              @active-change="handleRelationStyleChange($event, 'lineColor')"
              @show="handleColorPickShow"
              @hide="handleColorPickHide" />
          </div>
          <div class="b__item flex flex_1">
            <p>样式</p>
            <el-select
              v-model="relationStyle.lineStyle"
              placeholder="青选择"
              @change="handleRelationStyleChange($event, 'lineStyle')">
              <el-option
                v-for="item in STROKESTYLEOPTIONS.concat(STROKESTYLEOPTIONS.map(m => {
                  return {
                    label: `手绘风格-${m.label}`,
                    value: `rough-${m.value}`,
                  }
                }))"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="block">
          <div class="b__item flex">
            <p>尺寸</p>
            <el-select v-model="relationStyle.lineWidth" placeholder="青选择" @change="handleRelationStyleChange($event, 'lineWidth')">
              <el-option
                v-for="item in EDGELINESIZEOPTIONS[0].options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="style-modal">
      <div class="title">文本</div>
      <div class="content">
        <div class="block">
          <div class="b__item w_100 flex">
            <p>字体</p>
            <el-select v-model="relationStyle.fontFamily" placeholder="青选择" style="width: 164px" @change="handleRelationStyleChange($event, 'fontFamily')">
              <el-option
                v-for="item in FONTFAMILYOPTIONS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="block">
          <div class="b__item flex_1 flex margin_r_12">
            <p>字号</p>
            <el-select v-model="relationStyle.fontSize" placeholder="青选择" @change="handleRelationStyleChange($event, 'fontSize')">
              <el-option
                v-for="item in FONTSIZEOPTIONS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="b__item w_auto flex">
            <p>颜色</p>
            <el-color-picker
              :teleported="false"
              v-model="relationStyle.textColor"
              @active-change="handleRelationStyleChange($event, 'textColor')"
              @show="handleColorPickShow"
              @hide="handleColorPickHide" />
          </div>
        </div>
      </div>
    </div>
    <div class="style-modal" style="margin-top: 56px;">
      <el-button style="width: 100%;" type="default" plain @click="handleResetRelationStyle">重置样式</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps, watch } from 'vue'
import {
  FONTFAMILYOPTIONS,
  FONTSIZEOPTIONS,
  STROKESTYLEOPTIONS,
  EDGELINESIZEOPTIONS
} from '../config'
import { shortcutKeydown, resetcutKeydown } from '../shortcut-key'
import mitter from '@/mitt'
import ImgDropdown from './ImgDropdown.vue'

const props = defineProps({
  style: {
    type: Object,
    default: () => ({})
  }
})
const lineEndPointShapes = [
  { img: require('@/assets/images/xmind/arrow-none.svg'), value: 'arrow-none' },
  { img: require('@/assets/images/xmind/arrow-end-triangle.svg'), value: 'arrow-end-triangle' },
  { img: require('@/assets/images/xmind/arrow-end-diamond.svg'), value: 'arrow-end-diamond' },
  { img: require('@/assets/images/xmind/arrow-end-dot.svg'), value: 'arrow-end-dot' },
  { img: require('@/assets/images/xmind/arrow-end-doublearrow.svg'), value: 'arrow-end-doublearrow' },
  { img: require('@/assets/images/xmind/arrow-end-spearhead.svg'), value: 'arrow-end-spearhead' },
  { img: require('@/assets/images/xmind/arrow-end-square.svg'), value: 'arrow-end-square' },
  { img: require('@/assets/images/xmind/arrow-end-antiTriangle.svg'), value: 'arrow-end-antiTriangle' },
  { img: require('@/assets/images/xmind/arrow-end-attached.svg'), value: 'arrow-end-attached' }
]
const lineShapes = [
  { img: require('@/assets/images/xmind/relation-line-shape/curved.svg'), value: 'curved' },
  { img: require('@/assets/images/xmind/relation-line-shape/angled.svg'), value: 'angled' },
  { img: require('@/assets/images/xmind/relation-line-shape/straight.svg'), value: 'straight' },
  { img: require('@/assets/images/xmind/relation-line-shape/zigzag.svg'), value: 'zigzag' }
]

const relationStyle = reactive({
  lineShape: 'curved',
  startPointShape: 'arrow-end-dot',
  endPointShape: 'arrow-end-triangle',
  lineStyle: 'dashed',
  lineWidth: 2,
  fontFamily: 'nevermind',
  fontSize: 12,
  lineColor: '#000',
  textColor: '#000'
})

watch(() => props.style, newVal => {
  for (const key in newVal) {
    if (newVal[key]) {
      relationStyle[key] = newVal[key]
    }
  }
}, { deep: true, immediate: true })

function handleRelationStyleChange (styleValue, styleName) {
  relationStyle[styleName] = styleValue
  mitter.emit('update-relation-style', { styleValue, styleName })
}

function handleResetRelationStyle () {
  mitter.emit('reset-relation-style')
}

function handleColorPickShow () {
  resetcutKeydown()
}

function handleColorPickHide () {
  shortcutKeydown()
}
</script>

<style lang="scss" scoped>
.relation-line-style {
  .style-modal {
    .title {
      display: flex;
      font-size: 14px;
      font-weight: 600;
      color: #000;
      align-items: center;
      justify-content: space-between;
    }
    .content {
      .block {
        display: flex;
        margin-top: 16px;
        justify-content: space-between;
        .b__item {
          width: 48%;
          span {
            color: #999;
            font-size: 12px;
            margin-bottom: 6px;
            display: inline-block;
            display: block;
          }
          p {
            color: #333;
            font-size: 12px;
            margin-right: 12px;
            flex-shrink: 0;
          }
          &.flex {
            display: flex;
            align-items: center;
          }
          &.w_100 {
            width: 100%;
          }
          &.w_auto {
            width: auto;
          }
          &.flex_1 {
            flex: 1;
            width: 0;
          }
          &.margin_r_12 {
            margin-right: 12px;
          }
        }
      }
    }
    & + .style-modal {
      margin-top: 20px;
    }
  }
}
</style>
